<template>
  <div style="height: 100%" class="chat-detail-scroll-container">
    <div v-if="selectedConversation" class="chat-detail-content">
      <div class="chat-detail-main">
        <div v-show="!smallWindow" class="chat-header">
          <div class="chat-header-content" @click="() => editConversation()">
            <el-input
              ref="conversationNameInput"
              class="conversationInput"
              v-if="isEdit"
              v-model="editedTitle"
              @blur="saveEdit(selectedConversation)"
              @keyup.enter.native="saveEdit(selectedConversation)"
            ></el-input>
            <span
              class="conversationTitle"
              v-else
              :title="selectedConversation.title"
              >{{ selectedConversation.title }}
            </span>
          </div>
        </div>
        <div class="chat-content-container">
          <div class="sessionItem" v-loading="aqLoading">
            <div v-for="(item, index) in displayMessages" :key="index">
              <div class="userItem sessionItem-item" v-if="item.role == 'user'">
                <div class="userItem-question content">
                  <p class="userP">{{ item.content }}</p>
                </div>
              </div>
              <div class="sessionItem-item" v-else>
                <div class="systemItem sessionItem-item">
                  <div class="systemItem-avatar avatar">
                    <svg-icon
                      style="width: 30px; height: 30px"
                      icon-class="jiqirenmiddle"
                    />
                  </div>
                  <div class="systemItem-answer content">
                    <div class="reasoningContent" v-if="item.reasoningContent">
                      <div class="reasoningBtn">
                        <div
                          class="ds-icon reasoningIcon"
                          style="font-size: 12px; width: 12px; height: 12px"
                        >
                          <i class="el-icon-s-opportunity"></i>
                        </div>
                        慢思考
                        <div
                          class="ds-icon reasoningArrow"
                          style="
                            font-size: 10px;
                            width: 10px;
                            height: 10px;
                            margin-left: 10px;
                          "
                          @click="retractReasoning"
                        >
                          <i :class="`${isRetract ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}`"></i>
                        </div>
                      </div>
                      <div v-show="!isRetract" class="reasoningMarkdown">
                        <markdown-it-vue
                          class="markdown-item"
                          :content="item.reasoningContent"
                        />
                      </div>
                    </div>
                    <markdown-it-vue
                      class="markdown-item"
                      :content="item.content"
                    />
                    <span
                      class="span-icon-loading flex-item"
                      v-show="index == displayMessages.length - 1"
                      v-loading="item.anserLoading"
                    ></span>
                    <div
                      v-show="
                        index !== displayMessages.length - 1 ||
                        (index === displayMessages.length - 1 && !item.anserLoading)
                      "
                      class="comment flex-item"
                    >
                      <div class="show-left">
                        <el-tooltip
                          effect="dark"
                          content="重新生成"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px; margin-right: 6px;cursor: pointer;"
                            icon-class="newFresh"
                            :class="{ 'disable-click': displayMessages[displayMessages.length - 1].anserLoading }"
                            @click="refresh(item)"
                          />
                        </el-tooltip>
                        <el-tooltip
                          effect="dark"
                          content="复制"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px; margin-right: 6px;cursor: pointer"
                            icon-class="newCopy"
                            @click="copyText(item.content)"
                          />
                        </el-tooltip>
                        <el-tooltip
                          effect="dark"
                          content="查看引用"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px;cursor: pointer"
                            icon-class="newView"
                            v-show="
                              !smallWindow&& item.referenceList.length > 0
                            "
                            @click="viewReferences(item.referenceList)"
                          />
                        </el-tooltip>
                      </div>
                      <div class="show-right">
                        <el-popover
                          placement="top"
                          trigger="hover"
                          content="喜欢"
                          popper-class="comment-btn-popover"
                        >
                          <!-- 0  1 2 -->
                          <el-button
                            slot="reference"
                            @click="likeComment(item)"
                            :class="`comment-btn comment-btn-like iconfont ${
                              item.isLike == 0
                                ? 'icon-dianzan1'
                                : 'icon-dianzan'
                            }`"
                            circle
                          ></el-button>
                        </el-popover>
                        <!-- answerStatus 0未点；1点赞；2点踩 -->
                        <el-popover
                          popper-class="comment-btn-popover"
                          placement="top"
                          trigger="hover"
                          content="不喜欢"
                        >
                          <el-button
                            slot="reference"
                            @click="unlikeComment(item)"
                            :class="`comment-btn comment-btn-unlike iconfont ${
                              item.isLike == 1
                                ? 'icon-diancai-yi'
                                : 'icon-diancai'
                            }`"
                            circle
                          ></el-button>
                        </el-popover>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-show="index === displayMessages.length - 1 && !item.anserLoading"
                  style="padding: 20px 46px"
                >
                  <RecommendationList
                    @send-message="sendMessage"
                    :pecommendationList="pecommendationList"
                  ></RecommendationList>
                </div>
              </div>
            </div>
            <!-- <div v-for="(item, index) in displayMessages" :key="index">
              <div class="userItem sessionItem-item" v-if="item.role == 'user'">
                <div class="userItem-question content">
                  <p class="userP">{{ item.content }}</p>
                </div>
              </div>
              <div class="sessionItem-item" v-else>
                <div class="systemItem sessionItem-item">
                  <div class="systemItem-avatar avatar">
                    <svg-icon
                      style="width: 30px; height: 30px"
                      icon-class="jiqirenmiddle"
                    />
                  </div>
                  <div class="systemItem-answer content">
                    <div class="reasoningContent" v-if="item.reasoningContent">
                      <div class="reasoningBtn">
                        <div
                          class="ds-icon reasoningIcon"
                          style="font-size: 12px; width: 12px; height: 12px"
                        >
                          <i class="el-icon-s-opportunity"></i>
                        </div>
                        慢思考
                        <div
                          class="ds-icon reasoningArrow"
                          style="
                            font-size: 10px;
                            width: 10px;
                            height: 10px;
                            margin-left: 10px;
                          "
                          @click="retractReasoning"
                        >
                          <i :class="`${isRetract ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}`"></i>
                        </div>
                      </div>
                      <div v-show="!isRetract" class="reasoningMarkdown">
                        <markdown-it-vue
                          class="markdown-item"
                          :content="item.reasoningContent"
                        />
                      </div>
                    </div>
                    <markdown-it-vue
                      class="markdown-item"
                      :content="item.content"
                    />
                    <span
                      class="span-icon-loading flex-item"
                      v-show="index == displayMessages.length - 1"
                      v-loading="anserLoading"
                    ></span>
                    <div
                      v-show="
                        index !== displayMessages.length - 1 ||
                        (index === displayMessages.length - 1 && !anserLoading)
                      "
                      class="comment flex-item"
                    >
                      <div class="show-left">
                        <el-tooltip
                          effect="dark"
                          content="重新生成"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px; margin-right: 6px;cursor: pointer;"
                            icon-class="newFresh"
                            :class="{ 'disable-click': anserLoading }"
                            @click="refresh(item)"
                          />
                        </el-tooltip>
                        <el-tooltip
                          effect="dark"
                          content="复制"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px; margin-right: 6px;cursor: pointer"
                            icon-class="newCopy"
                            @click="copyText(item.content)"
                          />
                        </el-tooltip>
                        <el-tooltip
                          effect="dark"
                          content="查看引用"
                          placement="top"
                        >
                          <svg-icon
                            style="width: 22px; height: 22px;cursor: pointer"
                            icon-class="newView"
                            v-show="
                              !smallWindow&& item.referenceList.length > 0
                            "
                            @click="viewReferences(item.referenceList)"
                          />
                        </el-tooltip>
                      </div>
                      <div class="show-right">
                        <el-popover
                          placement="top"
                          trigger="hover"
                          content="喜欢"
                          popper-class="comment-btn-popover"
                        >
                          <el-button
                            slot="reference"
                            @click="likeComment(item)"
                            :class="`comment-btn comment-btn-like iconfont ${
                              item.isLike == 0
                                ? 'icon-dianzan1'
                                : 'icon-dianzan'
                            }`"
                            circle
                          ></el-button>
                        </el-popover>
                        <el-popover
                          popper-class="comment-btn-popover"
                          placement="top"
                          trigger="hover"
                          content="不喜欢"
                        >
                          <el-button
                            slot="reference"
                            @click="unlikeComment(item)"
                            :class="`comment-btn comment-btn-unlike iconfont ${
                              item.isLike == 1
                                ? 'icon-diancai-yi'
                                : 'icon-diancai'
                            }`"
                            circle
                          ></el-button>
                        </el-popover>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-show="index === displayMessages.length - 1 && !anserLoading"
                  style="padding: 20px 46px"
                >
                  <RecommendationList
                    @send-message="sendMessage"
                    :pecommendationList="pecommendationList"
                  ></RecommendationList>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <div class="chat-action">
          <ChatInput
            :anserLoading="displayMessages.length>0?displayMessages[displayMessages.length - 1].anserLoading:false"
            @send-message="sendMessage"
            @interrupt-request="interruptRequest"
            @clear-messages="clearMessages"
          />
        </div>
      </div>
      <div class="console-button"></div>
      <div
        v-show="quoteDiv && !smallWindow && referenceList.length > 0"
        class="side-console-container"
      >
        <ReferenceList
          :referenceList="referenceList"
          @view-references="swtchQuoteDiv"
        ></ReferenceList>
      </div>
    </div>
    <div v-else class="placeholder-container chat-detail-main">
      <div class="additional-element chat-content-container firstCommendationList">
        <div class="chat-container">
          <p style="font-size: 22px;line-height: 60px;">
            <svg-icon
              style="width: 60px; height: 60px; margin-right: 4px"
              icon-class="jiqirenlarge"
            />
            您好，我是AI问答助手，请问有什么可以帮到您？
          </p>
        </div>
        <div class="des">作为你的智能工作伙伴，我既能写文案、辅助工作，又能陪你聊天、答疑解惑。 快来和我对话吧！</div>
        <div class="firstCommendationListM">
          <div class="askMe">您可以试着问我：</div>
          <RecommendationList
          @send-message="sendMessage"
          :pecommendationList="pecommendationList"
        ></RecommendationList>
        </div>
      </div>
      <div class="chat-action first-chat-action">
        <ChatInput
          :isShowIcon="false"
          @send-message="sendMessage"
          @clear-messages="clearMessages"
        />
      </div>
    </div>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog title="反馈" :visible.sync="open" width="600px" append-to-body>
      <el-form @submit.native.prevent ref="form" :model="form" label-width="0px">
        <el-form-item prop="activate">
          <el-radio-group v-model="form.activate">
            <el-radio-button
              v-for="dict in dict.type.activate"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="dislikeDetail">
          <el-input
            type="textarea"
            placeholder="我们想知道你对此回答不满意的原因，你认为更好的回答是什么？"
            v-model="form.dislikeDetail"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
import ChatInput from "./ChatInput.vue";
import RecommendationList from "./RecommendationList.vue";
import ReferenceList from "./ReferenceList.vue";
import { copyTextFallback } from "@/utils/index";
import {
  setAnswerStatus,
  commentStatus,
  cancelLikes,
} from "@/api/counterAssistant/session";
export default {
  components: { MarkdownItVue, ChatInput, ReferenceList, RecommendationList },
  dicts: ["activate"],
  props: {
    selectedConversation: {
      type: Object,
      default: null,
    },
    aqLoading: {
      type: Boolean,
      default: false,
    },
    smallWindow: {
      type: Boolean,
      default: false,
    },
    // anserLoading: {
    //   type: Boolean,
    //   default: false,
    // },
    displayMessages: {
      type: Array,
      required: true,
      default: [],
    },
    // conversations: {
    //   type: Array,
    //   required: true,
    //   default: [],
    // },
    referenceList1: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      referenceList:[],
      pecommendationList: [
        "请告诉我《银行日常管理制度》中哪些需要特别注意？",
        "商业银行合规审查工作管理办法主要包含哪些内容？",
        "合规领域中反洗钱业务最核心包含哪些？",
        "我们银行的相关绩效考核包含哪些方面？",
      ],
      isEdit: false,
      answerStatus: 0,
      editedTitle: "",
      quoteDiv: true,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      like: null,
      unlike: false,
      isRetract: false,
      // 点赞参数
      queryParams: {
        activate: 1, // 点踩状态
        answer: 10, // 问题
        dislikeDetail: "", // 点踩内容
        isLike: null, // 点踩状态
        qaId: 1,
        question: "",
        sessionId: 1, // 会话id
      },
    };
  },
  // computed: {
  //   displayMessages() {
  //     const conversationTemp= getConversationTemp(selectedConversation.id)
  //     return conversationTemp
  //   }
  // },
  created() {
    const storedValue = sessionStorage.getItem("isAutoExpand");
    if (storedValue !== null) {
      this.quoteDiv = JSON.parse(storedValue);
    }
  },
  watch: {
    selectedConversation: {
      handler(val) {
        if (val) {
          this.isEdit = false;
        }
      },
    },
    referenceList1: {
      handler() {
        this.referenceList = this.referenceList1
      },
      deep: true
    },
  },
  methods: {
    // getConversationTemp(id){
    //   const conversationTemp = this.conversations.find(item => item.id === id);
    //   return conversationTemp
    // },
    retractReasoning() {
      this.isRetract = !this.isRetract;
    },
    viewReferences(referenceList) {
      referenceList&&(this.referenceList = referenceList);
      this.quoteDiv = true;
    },
    swtchQuoteDiv() {
      this.quoteDiv = false;
    },
    sendMessage(messageContent) {
      // console.log("sendMessage", messageContent);
      if (messageContent.trim()) {
        this.$emit("send-message", messageContent, this.answerStatus);
        this.answerStatus = 0;
      }
    },
    handlerChange(value) {
      this.$emit("select-agent", value);
    },
    likeComment(item) {
      // console.log("likeComment", item);
      let status = null;
      if (item.isLike === 0) {
        this.cancelLikesFn(item.qaId, status);
      } else {
        this.like = item.isLike;
        status = 0;
        this.queryParams = {
          // activate: "", // 点踩状态
          answer: item.content, // 问题
          // dislikeDetail: "", // 点踩内容
          isLike: 0, // 点踩状态
          bgId: item.qaId,
          question: item.question,
          sessionId: item.sessionId, // 会话id
        };
        this.updataComment(this.queryParams, status);
      }
    },
    unlikeComment(item) {
      let status = null;
      if (item.isLike === 1) {
        this.cancelLikesFn(item.qaId, status);
      } else {
        this.open = true;
        this.reset();
        this.like = item.isLike;
        this.queryParams = {
          answer: item.content, // 问题
          isLike: 1, // 点踩状态
          bgId: item.qaId,
          question: item.question,
          sessionId: item.sessionId, // 会话id
          activate: "", // 点踩状态
          dislikeDetail: "", // 点踩内容
        };
      }
    },
    // 表单重置
    reset() {
      this.form = {
        activate: null,
        dislikeDetail: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      // 反馈接口
      this.open = false;
      this.queryParams.dislikeDetail = this.form.dislikeDetail;
      this.queryParams.activate = this.form.activate;
      this.updataComment(this.queryParams, 1);
    },
    updataComment(item, status) {
      const method =
        this.like === null || this.like === undefined ? "post" : "put";
      // console.log("likeComment", this.like, method);
      commentStatus(this.queryParams, method).then((res) => {
        // console.log("likeComment", res);
        if (res.code == 200) {
          this.$emit("change-selectedConversation", item.bgId, status);
        }
      });
    },
    cancelLikesFn(id, status) {
      // console.log("updataComment", id);
      cancelLikes(id).then((res) => {
        // console.log("cancelLikes", res);
        if (res.code == 200) {
          this.$emit("change-selectedConversation", id, status);
        }
      });
      // cancelLikes(item.qaId)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    interruptRequest() {
      this.$emit("interrupt-request");
    },
    clearMessages() {
      this.answerStatus = 1;
      const data = {
        id: this.selectedConversation.id,
        answerStatus: this.answerStatus,
      };
      setAnswerStatus(data).then((response) => {
        if(response.code == 200){
          this.$modal.msgSuccess('清理成功');
        }
      });
    },
    saveEdit() {
      this.isEdit = false;
      if (this.editedTitle.trim() === "") return;
      this.selectedConversation.title = this.editedTitle;
      this.$emit(
        "update-conversation",
        this.selectedConversation.id,
        this.editedTitle
      );
      this.editedTitle = "";
    },
    editConversation() {
      this.isEdit = true;
      this.editedTitle = this.selectedConversation.title;
      this.$nextTick(() => {
        // console.log("focus",this.$refs.conversationNameInput)
        this.$refs.conversationNameInput.focus();
      });
    },
    copyText(textToCopy) {
      if ('clipboard' in navigator) {
          // 浏览器支持 Clipboard API
          navigator.clipboard
            .writeText(textToCopy)
            .then(() => {
              this.$modal.msgSuccess("复制成功");
            })
            .catch((err) => {
              this.$modal.msgError("复制失败");
            });
      } else {
          // 浏览器不支持 Clipboard API，可考虑使用其他方法
          const text = copyTextFallback(textToCopy)
          if(text==='复制成功')  {
            this.$modal.msgSuccess(text);
            
          }else{
            this.$modal.msgError(text);
          }
        }
    },
    refresh(item) {
      this.sendMessage(item.question);
    },
  },
};
</script>
  
<style scoped lang="scss">
.chat-detail-scroll-container {
  flex: 1;
  overflow: auto;
  background: #fff;
  position: relative;

  .placeholder-container {
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #9e9e9e;
    line-height: 22px;
    text-align: left;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    display: flex;
    position: relative;
    .additional-element {
      display: flex;
      margin-bottom: 10px; /* 添加间距 */
      width: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* 如果需要垂直排列子元素 */
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      // flex-grow: 1;
      // margin: auto;
      padding: 38px 0 40px;
      p {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        color: #9e9e9e;
        // padding-left: 12px;
      }
      .chat-container {
        text-align: left;
        i {
          color: #409eff;
        }
      }
    }
  }
  .chat-detail-content {
    display: flex;
    flex: 1;
    min-width: 0;
    .chat-detail-main {
      flex: 1;
      min-width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      min-height: calc(100vh - 86px);
      .chat-header {
        background: #fff;
        box-sizing: border-box;
        width: 100%;
        padding: 7px 50px;
        height: 46px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        min-width: 375px;
        max-width: 1090px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        z-index: 10;
        
        .chat-header-content {
          max-width: 500px;
          display: flex;
          justify-content: center;
          // justify-content: flex-start;
          align-items: center;
          padding: 4px 8px;
          border-radius: 8px;
          position: relative;
          box-sizing: border-box;
          cursor: pointer;
      
          .conversationTitle {
            border-radius: 8px;
            color: #262626;
            // background: #f0f0f0;
            display: inline-block;
            padding: 8px;
            width: 100%;
            font-size: 18px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover {
              border: 1px solid #d9d9d9;
            }
          }
        }
      }
    }
    .chat-content-container {
      box-sizing: border-box;
      width: 100%;
      max-width: 1090px;
      display: flex;
      padding: 0 16px 30px;
      flex: 1;
      .sessionItem {
        padding: 10px 20px;
        min-height: 100%;
        border-radius: 8px;
        width: 100%;
        .sessionItem-item {
          &.userItem {
            display: flex;
            // justify-content: flex-end;
            align-items: start;
            flex-direction: column;
            align-items: flex-end;
            margin-top: 20px;
            .userItem-avatar {
              padding-top: 22px;
              text-align: right;
              margin-left: 10px;
            }
            p {
              padding: 10px;
              background: #eff6ff;
              border-radius: 10px;
              // margin-right: 10px;
            }
          }
          &.systemItem {
            display: flex;
            align-items: start;
            justify-content: flex-start;
            .systemItem-avatar {
              margin-right: 10px;
              margin-top: 6px;
              i {
                color: #409eff;
              }
            }
            .systemItem-answer {
              width: 100%;
              background: #f5f5f5;
              border-radius: 10px;
              padding: 14px;
              display: flex;
              flex-wrap: wrap; /* 允许子元素换行 */
              justify-content: flex-start; /* 左对齐 */
              gap: 10px; /* 子元素之间的间距 */
              .markdown-item {
                width: 100%;
              }
              .comment {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .show-left {
                  .comment-refresh {
                    margin-right: 10px;
                  }
                  i {
                    margin-right: 6px;
                    cursor: pointer;
                    font-size: 24px;
                  }
                }
                .show-right {
                  .el-button--medium.is-circle {
                    padding: 6px;
                  }
                }
                span {
                  margin-right: 10px;
                }
              }
              .reasoningContent {
                margin-bottom: 13px;
              }
              .reasoningBtn {
                color: #24292e;;
                margin-bottom: 12px;
                font-size: 12px;
                line-height: 18px;
                cursor: pointer;
              }
              .reasoningBtn {
                background: #ccc;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                width: fit-content;
                padding: 7px 14px;
                display: flex;
              }
              .reasoningIcon {
                margin-right: 6px;
              }
              .ds-icon {
                line-height: 0;
                display: inline-flex;
              }
              .reasoningContent .reasoningMarkdown {
                white-space: pre-wrap;
                margin: 0;
                padding: 0 0 0 13px;
                line-height: 26px;
                position: relative;
                border-left: #a6a6a6 2px solid;
                .markdown-body{
                  color: #a6a6a6!important;
                }
              }
            }
          }
          .avatar {
            width: 40px;
            height: 40px;
            .iconfont {
              font-size: 28px;
            }
          }
        }
      }
    }
    .chat-action {
      background: #fff;
      width: 100%;
      max-width: 1090px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      padding: 0 16px;
      box-sizing: border-box;
      // flex-direction: column;
      // align-items: center;
      margin-top: auto;
      // display: flex;
      // position: -webkit-sticky;
      // position: sticky;
      // bottom: 0;
    }
    .console-button {
      position: fixed;
      margin: auto;
      z-index: 15;
      top: 80px;
      right: 16px;
      padding: 6px;
      cursor: pointer;
      display: flex;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    .side-console-container {
      width: 400px;
      height: calc(100vh - 200px);
      margin-right: 8px;
      box-sizing: border-box;
      position: -webkit-sticky;
      position: sticky;
      top: 56px;
      z-index: 10;
      border-radius: 20px 20px 20px 20px;
      border: 1px solid #dcdcdc;
      padding: 10px;
    }
  }
}
.chat-action {
  width: 100%;
}
.footer-input-paperclipDiv {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 10px;
  justify-content: flex-end;
  .paperclipDiv {
    background: #f3f4f6;
    border-radius: 12px;
    // width: calc(33.3333% - 8.33333px);
    transition: background-color 0.3s;
    position: relative;
    align-items: center;
    padding: 8px;
    display: flex;
    .paperclipTextDiv {
      overflow: hidden;
      .paperclipTextDiv-title {
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #262626;
        min-height: 20px;
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        overflow: hidden;
      }
    }
  }
}

.disable-click {
  pointer-events: none;
  opacity: 0.5; /* 可添加透明度样式来提示用户该元素不可用 */
}

/* 修改当前组件内 Markdown 渲染内容的行间距 */
::v-deep .reasoningMarkdown .markdown-body p {
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 0;
}

::v-deep .reasoningMarkdown .markdown-body ul,
::v-deep .reasoningMarkdown .markdown-body ol {
    line-height: 1.5;
}
</style>
  <style lang="scss">
.aq-input {
  .el-input__inner {
    padding: 10px 20px;
    height: 50px;
    border-radius: 25px;
    padding-right: 50px;
  }
  .el-input__suffix {
    right: 20px;
    top: 12px;
    height: 30px;
  }
  .aq-send-btn {
    i.icon-video-pause {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #fff;
      margin: 0 3px;
      border-radius: 3px;
    }
  }
}
.conversationInput {
  .el-input__inner {
    border-radius: 8px;
    padding-left: 8px;
  }
}
.span-icon-loading.el-loading-parent--relative {
  margin-top: 20px;
  .el-loading-spinner .circular {
    width: 24px;
    height: 24px;
  }
}
.comment-btn-popover {
  &.el-popover {
    min-width: 40px;
    padding: 8px;
  }
}
.reasoningContent .reasoningMarkdown {
    .markdown-body{
      color: #a6a6a6!important;
    }
  }
.an-qu .chat-detail-scroll-container .placeholder-container .firstCommendationList{
  align-items: normal;
  &.additional-element.chat-content-container{
    height: auto !important;
    flex-grow: initial;
    // margin: 0px;
    // width: 80%;
    padding: 0;
    width: 800px;
    margin: 0 auto;
    p{
      justify-content: center;
    }
    // .chat-container {
      
    // }
  }
  .des{
    // padding: 0 144px;
    margin-bottom: 30px;
    font-size: 18px;
    color: #797979;
    line-height: 30px;
    text-align: left;
  }
  .firstCommendationListM{

    // padding: 0 144px;
    .askMe{
      font-size: 17px;
      color: #0E0E0E;
      line-height: 30px;
      text-align: left;
      margin-bottom: 20px;
    }
    .recommendation{
      // display: flex;
      // flex-wrap: wrap; /* 允许子元素换行 */
      // gap: 8px;
      // flex-direction: row;
      .recommend-prompt-item{
        // align-items: center;
        // padding: 8px;
        // display: flex;
        // margin-right: 0;
      }
    }
  }
}
.first-chat-action{
  &.chat-action{
    width: 864px;
    margin: 0 auto;
  }
  .content-footer{
    position: inherit;
    // padding: 0 130px;
  }
}
</style>